<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
			* {
				box-sizing: border-box;
			}
			
			body {
				margin: 0;
				font-family: Arial;
			}
			
			.header {
				text-align: center;
				padding: 32px;
			}
			
			.falls {
				display: flex;
				flex-wrap: wrap;
				padding: 0 4px;
			}
			/* 创建彼此相邻的四个相等的列 */
			
			.column {
				flex: 25%;
				max-width: 25%;
				padding: 0 4px;
			}
			
			.column img {
				vertical-align: middle;
			}
			
			.column .flow {
				width: 100%;
				height: 260px;
				background: #ddd;
				margin-top: 10px;
			}
			/* 响应式布局 - 制作两列而不是四列的布局 */
			
			@media screen and (max-width: 800px) {
				.column {
					flex: 50%;
					max-width: 50%;
				}
			}
			/* 响应式布局 - 使两列相互堆叠而不是彼此并排 */
			
			@media screen and (max-width: 600px) {
				.column {
					flex: 100%;
					max-width: 100%;
				}
			}
		</style>
	</head>

	<body>

		<!-- Header -->
		<div class="header">
			<h1>响应式图像网格</h1>
			<p>请调整浏览器窗口的大小以查看响应效果。</p>
		</div>
		<!-- Photo Grid -->
		<div class="falls">
			<div class="column">
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					16
				</div>
			</div>
			<div class="column">
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					16
				</div>
			</div>
			<div class="column">
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					16
				</div>
			</div>
			<div class="column">
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					1
				</div>
				<div class="flow">
					16
				</div>
			</div>
		</div>

	</body>

</html>